<template>
    <div class="category">
        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <div class="box">
            <div class="left">
                <van-sidebar v-model="active" @change="onChange">
                    <van-sidebar-item v-for="item in categoryListArr" :title="item.name" :key="item.id" />
                </van-sidebar>
            </div>
            <div class="right">
                <img :src="(currentCategory as Icurrentcategory).banner_url" alt="">
                <h5>{{ (currentCategory as Icurrentcategory).front_desc }}</h5>
                <div>
                    <h3>{{ (currentCategory as Icurrentcategory).name }}</h3>
                    <van-grid>
                        <van-grid-item v-for="item in (currentCategory as Icurrentcategory).subCategoryList" :key="item.id"
                            :icon="item.banner_url" :text="item.name" />
                    </van-grid>
                </div>

            </div>

        </div>

    </div>
</template>

<script setup lang='ts'>
// 导入接口
import { getcategoryalldata, getcurrentcategorydata } from '@/api/category'
import { onMounted, ref } from 'vue';
//导入类型声明文件
import type { Icategoryitem, Icurrentcategory } from '@/types/category'
const categoryListArr = ref<Array<Icategoryitem>>([])
const value = ref('') // 搜索关键字
const active = ref<number>(0)  // 点击下标
const currentCategory = ref<Icurrentcategory | {}>({})
const onChange = (index: number) => {
    console.log(index);
    let id = categoryListArr.value[index].id
    // console.log(id);
    // 获取当前类别id
    getcurrentcategorydata({ id: String(id) }).then(res => {
        console.log(res);
        // 当前分类数据
        currentCategory.value = res.data.data.currentCategory
    })
};
onMounted(() => {
    // 调用接口
    getcategoryalldata().then(res => {
        console.log(res);
        // 全部分类
        categoryListArr.value = res.data.data.categoryList
        // 当前分类数据
        currentCategory.value = res.data.data.currentCategory
    })


})


</script>
<style scoped lang="scss">
.category {
    .box {
        display: flex;

        .right {
            flex: 1;
            position: relative;

            img {
                width: 90%;
                display: block;
                margin: 0 auto;
            }

            h5 {
                position: absolute;
                text-align: center;
                left: 50%;
                transform: translate(-50%);
                right: 0;
                top: 35px;

            }

            h3 {
                text-align: center;
                margin: 20px 0;
            }
        }
    }

}
</style>